<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /* CSS代码 */
    html {
        height: 100%;

    }

    .container {
        margin: 0;
        padding: 0;
        perspective: 2px;
        transform-style: preserve-3d;
        transform-origin: center center;
        height: 800px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .g-container {
        position: relative;
        transform-style: preserve-3d;
        height: 300%;

    }

    .g-container > div {
        font-size: 5vw;
        position: absolute;
        top: 50%;
    }

    .g-container > .section-one {
        left: 0%;
        background: rgba(10, 10, 10, .2);
        transform: translateZ(-2px);
    }

    .g-container > .section-two {
        left: 40%;
        background: rgba(30, 130, 30, .2);
        transform: translateZ(-4px);
    }

    .g-container > .section-three {
        left: 90%;
        background: rgba(200, 100, 130, .2);
        transform: translateZ(-6px);
    }


</style>
<body>
<div class="container">
<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>
</div>
</body>

</html>